
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript">
    <tabulator_src>
</script>
<style>
    .unitnomatch {
        color: red;
        font-weight: bold;
    }

    .promoted {
        color: blue;
    }

    .middle {
        text-align: center;
        width: 100%;
        display:table;
    }

    .toggle {
        width: 5%;
        display:table-cell;
        text-align: center;
    }

    input {
        margin: 3px 5px 3px 5px;
    }


    <tabulator_style>
</style>
<title>Connection Viewer</title>
</head>
<body>
    <h2 id="conn_title"></h2>
    <div id="connection-table"></div>
<script type="text/javascript">

var data = <connection_data>;
var tabledata = data.table;

document.title = data.title;
document.getElementById("conn_title").innerHTML = data.title

if(data.show_values == true) {
    valstr = "<span class='toggle'><input type='checkbox' checked='true' onclick='values_toggle(this)'>Values</input></span>";
}
else {
    valstr = "<span class='toggle'><input type='checkbox' onclick='values_toggle(this)'>Values</input></span>";
}

var table =
    new Tabulator("#connection-table", {
        // set height of table (in CSS or here), this enables the Virtual DOM and
        // improves render speed dramatically (can be any valid css height value)
        height: 650,
        data:tabledata, //assign data to table
        layout:"fitColumns", //"fitDataFill",
        footerElement:"<p class='middle'>" +
                            "<span class='toggle'><input type='checkbox' onclick='src_abs_toggle(this)'>Absolute Outputs</input></span>" +
                            "<span class='toggle'><input type='checkbox' checked='true' onclick='src_prom_toggle(this)'>Promoted Outputs</input></span>" +
                            "<span class='toggle'><input type='checkbox' checked='true' onclick='sunits_toggle(this)'>Output Units</input></span>" +
                            valstr +
                            "<span class='toggle'><input type='checkbox' checked='true' onclick='tunits_toggle(this)'>Input Units</input></span>" +
                            "<span class='toggle'><input type='checkbox' onclick='tgt_abs_toggle(this)'>Absolute Inputs</input></span>" +
                            "<span class='toggle'><input type='checkbox' checked='true' onclick='tgt_prom_toggle(this)'>Promoted Inputs</input></span></p>",
        columns:[ //Define Table Columns
                {title: "Output (absolute)", field:"src", hozAlign:"left", headerFilter:true,
                    visible:false, minWidth:300,
                tooltip:function(cell){
                    return cell.getData().sprom;
                }},
                {title: "Output (promoted)", field:"sprom", hozAlign:"left", headerFilter:true, minWidth:300,
                    formatter:function(cell, formmaterParams, onRendered) {
                    var promname = cell.getData().sprom;
                    if (promname == cell.getData().src) {
                        return promname;
                    }
                    else {
                        return "<span class='promoted'>" + promname + "</span>";
                    }
                },
                tooltip:function(cell){
                    return cell.getData().src;
                }},
                {title: "Units", field:"sunits", hozAlign:"center", headerFilter:true,
                    formatter:function(cell, formatterParams){
                    var value = cell.getValue();
                    if(value.startsWith("!")){
                        return "<span class='unitnomatch'>" + value.substring(1) + "</span>";
                    }else{
                        return value;
                    }
                    }},
                {title: "Value", visible:data.show_values, field:"val", hozAlign:"center", headerFilter:true},
                {title: "Units", field:"tunits", hozAlign:"center", headerFilter:true,
                    formatter:function(cell, formatterParams){
                        var value = cell.getValue();
                        if(value.startsWith("!")){
                            return "<span class='unitnomatch'>" + value.substring(1) + "</span>";
                        }else{
                            return value;
                        }
                    }
                },
                {title: "Input (absolute)", field:"tgt", hozAlign:"left", headerFilter:true,
                    visible:false, minWidth:300,
                    tooltip:function(cell){
                    return cell.getData().tprom;
                    }},
                {title: "Input (promoted)", field:"tprom", hozAlign:"left", headerFilter:true,
                    minWidth:300,
                    formatter:function(cell, formmaterParams, onRendered) {
                    var promname = cell.getData().tprom;
                    if (promname == cell.getData().tgt) {
                        return promname;
                    }
                    else {
                        return "<span class='promoted'>" + promname + "</span>";
                    }
                    },
                    tooltip:function(cell){
                    return cell.getData().tgt;
                }},
        ],
});


function src_abs_toggle(tbutton) {
    table.toggleColumn("src");
    table.redraw();
}

function src_prom_toggle(tbutton) {
    table.toggleColumn("sprom");
    table.redraw();
}

function tgt_abs_toggle(tbutton) {
    table.toggleColumn("tgt");
    table.redraw();
}

function tgt_prom_toggle(tbutton) {
    table.toggleColumn("tprom");
    table.redraw();
}

function values_toggle(tbutton) {
    table.toggleColumn("val");
    table.redraw();
}

function sunits_toggle(tbutton) {
    table.toggleColumn("sunits");
    table.redraw();
}

function tunits_toggle(tbutton) {
    table.toggleColumn("tunits");
    table.redraw();
}

</script>
</body>
</html>
